<template>
  <div class="schoolProject">
    <!-- 头部 -->
    <div class="head_box">
      <div class="img2">
        <u--image
          :showLoading="true"
          :src="img2"
          width="295px"
          height="39px"
        ></u--image>
      </div>
    </div>
    <!-- 表单内容 -->
    <div class="content">
      <div class="title">
        <span class="title1" style="font-weight: 500">王芳</span>
        <span class="title2">欢迎参加校庆云报到</span>
      </div>
      <div class="form_box">
        <div style="margin-bottom: 10px">
          <u--text
            text="写下您给母校的祝福"
            color="#5a5a5a"
            size="16"
          ></u--text>
        </div>

        <u--textarea
          v-model="value1"
          placeholder="280字以内"
          maxlength="280"
          height="182"
        ></u--textarea>
      </div>
    </div>
    <!-- 图片 -->
    <div
      class="img_box"
      style="width: 100%; background: white; padding-bottom: 20px"
    >
      <u--image
        :showLoading="true"
        :src="img3"
        width="97px"
        height="108px"
      ></u--image>
    </div>
    <!-- 按钮 -->
    <div
      class="btn_box"
      style="
        padding: 20px 10px;
        box-sizing: border-box;
        background: #d36c6b;
        width: 100%;
      "
    >
      <button
        class="btn"
        @click="goJump"
        style="background: #fff; color: #d36c6b; border-radius: 10px"
      >
        立即云报到
      </button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: "",
      img2: require("@/static/index/xiaoqing_img2.png"),
      img3: require("@/static/index/xiaoqing_img3.png"),
    };
  },
  methods: {
    goJump() {
      if (this.value1) {
        uni.showToast({
          title: "报到成功！",
          duration: 2000,
          success: () => {
            setTimeout(() => {
              uni.reLaunch({
                url: "/pages/schoolProject/detailPage",
              });
            }, 600);
          },
        });
      } else {
        console.log(this.value1);
        uni.$u.toast("还未填写祝福！");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.schoolProject {
  .head_box {
    height: 150px;
    background: url(../../static/index/xiaoqing_bj.png) no-repeat center/100%
      100%;
    position: relative;
    .img2 {
      position: absolute;
      left: 50%;
      bottom: -13px;
      transform: translate(-50%);
    }
  }
  .content {
    background: white;
    padding: 40px 20px 30px 20px;
    .title {
      font-size: 20px;
      margin-bottom: 30px;
      .title2 {
        margin-left: 10px;
        color: #a1a1a1;
      }
    }
  }
}
</style>